<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>mall</title>
    <!--导入依赖-->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../my/css/back.css">
    <link rel="stylesheet" href="../summernote/summernote-bs4.min.css">

    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>



</head>

<body>

<div>
    <!--导航栏-->
    <div>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" style="margin-left: 25px" href="#">白大师后台管理系统</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">搜 索</a></li>
                        <li><a href="#">欢迎您：admin</a></li>
                        <li><a href="#">退出登录</a></li>
                    </ul>
                    <form class="navbar-form navbar-right">
                        <input type="text" class="form-control" placeholder="Search...">
                    </form>
                </div>
            </div>
        </nav>
    </div>
    <!--主体部分-->
    <div>
        <div class="container-fluid">
            <div class="row">
                <div class=" col-md-2">
                    <div class="sidebar">
                        <ul class="nav nav-sidebar nav-center">
                            <li>
                                <img src="../image/cat.png" width="150px" height="150px" class="img-circle">
                            </li>
                        </ul>
                        <ul class="nav nav-sidebar nav-center">
                            <li><a href="index.html" class="bg-primary">商品管理</a></li>
                            <li><a href="category.html">类别管理</a></li>
                            <li><a href="order.html">订单管理</a></li>
                            <li><a href="user.html">用户管理</a></li>
                            <li><a href="">通知公告</a></li>
                            <li><a href="">我的账户</a></li>

                        </ul>
                    </div>
                </div>
                <div class="col-md-10 main " id="addItemApp">
                    <h2 class="sub-header">新增商品</h2>
                    <div class="table-responsive">

                        <!--表单开始-->
                        <form class="form-horizontal" @submit.prevent="addItem">
                            <div class="form-group">
                                <label class="col-md-1 control-label">商品名称</label>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" v-model="itemsName" placeholder="商品名称">
                                </div>
                                <div class="col-md-2 img-display col-md-offset-5">
                                    <img id="image" height="120px" width="120px" src="../image/baitu.png">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-1 control-label">分类名称</label>
                                <div class="col-md-4 dropdown">
                                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        点击选择商品分类
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu cate-list" aria-labelledby="dropdownMenu1" >
                                        <li v-for="category in categories"><a v-text="category.catName" @click="select(category.id,category.catName)">Action</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-1 control-label">商品主图</label>
                                <div class="col-md-3">
                                        <div>
                                            <label>
                                                <input id="imageFile" type="file">
                                            </label>
                                        </div>
                                </div>
                                <div class="col-md-2">
                                    <button type="button" class="bg-success" onclick="loadImg()">确认上传主图</button>
                                </div>
                                <!--<div class="col-sm-4">
                                    <img width="200px" height="200px" id="image" src="" alt="">
                                </div>-->

                            </div>

                            <div class="form-group">
                                <label class="col-md-1 control-label">商品简介</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control" v-model="itemsSynopsis" placeholder="商品简介">
                                </div>
                            </div>
                            <div class="form-group">
                                <label  class="col-md-1 control-label">商品单价</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control"  v-model="unitPrice" placeholder="商品单价">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-1 control-label">商品规格</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control" v-model="specification" placeholder="商品规格">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-1 control-label">商品库存</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control" v-model="stock" placeholder="商品库存">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-1 control-label">商品状态</label>
                                <div class="col-md-4 dropdown">
                                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        点击选择上下架状态
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu cate-list" aria-labelledby="dropdownMenu1" >
                                        <li><a onclick="statusOne()">在售</a></li>
                                        <li><a onclick="statusTwo()">下架</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-1 control-label">商品介绍</label>
                                <div class="col-md-10">
                                    <div class="form-group">
                                        <!--富文本编辑器 start-->
                                        <label for="summernote"></label>
                                        <textarea name="content" id="summernote"></textarea>
                                        <!--富文本编辑器 end-->
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-offset-5 col-md-10">
                                    <button type="submit" class="btn btn-primary">提交新增</button>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script src="../summernote/summernote.min.js"></script>
<script src="../summernote/lang/summernote-zh-CN.min.js"></script>
<script>
    $(document).ready(function() {
        $('#summernote').summernote({
            height: 300,
            tabsize: 2,
            lang: 'zh-CN',
            placeholder: '请输入商品的详细描述...',
            /*callbacks 回调函数*/
            callbacks:{
                /* onImageUpload：用户选中图片的事件*/
                onImageUpload:function(files){
                    //获取图片
                    let file=files[0];
                    let form=new FormData();
                    form.append("imageFile",file);
                    axios({
                        url:"/backItems/upload/file",
                        method:"post",
                        data:form
                    }).then(function (response) {
                        //获得img标签
                        let img=new Image();
                        img.src=response.data;
                        //将上传的图片显示在富文本编辑器中
                        $("#summernote").summernote("insertNode",img);
                    })
                }
            }
        });
    });
</script>
</body>
<script src="../my/js/addItem.js"></script>
<script>
    //图片上传
    function loadImg() {
        let files=document.getElementById("imageFile").files;
        //判断是否选中文件
        if (files.length > 0){
            uploadFile(files[0]);
        }else {
            alert("请选择要上传的文件");
        }
    }

    function uploadFile(file){
        //上传文件需要表单对象
        let form=new FormData();
        //向表单对象中保存名称和它对应的数据
        form.append("imageFile",file);
        //提交表单
        axios({
            url:"/backItems/upload/file",
            method:"post",
            data:form
        }).then(function (response) {
            console.log(response.data);
            $("#image").attr("src",response.data);
        })
    }

    function statusOne() {
        $("#dropdownMenu2").text("在售")
    }
    function statusTwo() {
        $("#dropdownMenu2").text("下架")
    }
</script>
</html>
